<template>
  <div>
    <div :id="id" style="height: 100%"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: String,
        required: true,
      },
      dataList: {
        type: Array,
        default: [{
            name: "风速仪",
            value: 40
        }, {
            name: "加速度",
            value: 30
        }, {
            name: "全站仪",
            value: 20
        }, {
            name: "温度计",
            value: 10
        }]
      },
      color: {
        type: Array,
        default: [
          "#0080ff",
          "#25a2f2",
          "#4dfbff",
          "#30ffcc"
        ]
      }
    },
    mounted() {
      let mCharts = echarts.init(document.querySelector(`#${this.id}`))
      let data = this.dataList
      let value = data.map((item) => item.value)
      let sum = value.reduce((a, b) => {
        return a + b
      })
      let series = []
      let yAxis = []
      for (let i = 0; i < data.length; i++) {
          series.push({
            name: "",
            type: "pie",
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [45 - i * 10 + "%", 41 - i * 10 + "%"],
            center: ["40%", "50%"],
            label: {
              show: false
            },
            itemStyle: {
              borderWidth: 30, //圆柱图宽度
              borderRadius: 30, //光环宽度
              borderColor: 'rgba(0, 0,0, 0)',
              borderDashOffset: 20,
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sum - data[i].value,
                name: "",
                itemStyle: {
                    color: 'transparent',
                },
                hoverAnimation: false
              }
            ]
          })
          // series.push({
          //     name: "",
          //     type: "pie",
          //     silent: true,
          //     z: 1,
          //     clockWise:false, //顺时加载
          //     hoverAnimation:false, //鼠标移入变大
          //     radius: [45 - i * 10 + "%", 41- i * 10 + "%"],
          //     center: ["40%", "50%"],
          //     label: {
          //         show: false
          //     },
          //     itemStyle: {
          //         borderWidth: 30, //圆柱图宽度
          //         borderRadius: 30, //光环宽度
          //         borderColor: 'rgba(0, 0,0, 0)',
          //         borderDashOffset: 20,
          //     },
          //     data: [{
          //             value: 7.5,
          //             itemStyle: {
          //                 color:"#1a2a39",
          //             },
          //             hoverAnimation: false
          //         },
          //         {
          //             value: 2.5,
          //             itemStyle: {
          //                 color: "rgba(0,0,0,0)",
          //             },
          //             hoverAnimation: false
          //         }
          //     ]
          // })
          // yAxis.push(((data[i].value / sum) * 100).toFixed(2) + "%")
      }
      let option = {
          color: this.color,
          legend: {
            show: true,
            icon: "circle",
            top: "center",
            right : "0%",
            data: name,
            itemWidth: 10,
            itemHeight:10,
            width: 200,
            itemGap: 40,
            orient:'horizontal',
            formatter: (name) => {
              return (
                "{title|" + name + "}{value|" + data.find((item) => {
                  return item.name == name
                }).value + "}{value|人}"
              );
            },
            textStyle: {
              rich: {
                title: {
                  fontSize: 14,
                  padding:[0,15,0,5], // 整体偏移label位置
                  color: "#008FF4"
                },
                value: {
                  fontSize: 18,
                  color: "#008FF4"
                }
              }
            }
          },

          grid: {
            top: "26%",
            left: "40%",
            width:"40%",
            height:"21%",
            containLabel: false
          },
          yAxis: [{
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: 14
              },
              show: true
            },
            data: yAxis
          }],
          xAxis: [{
            show: false,
          }],
          series: series
      };

      mCharts.setOption(option)
    }
  }
</script>

<style lang="scss" scoped>

</style>